<template>
  <div class="container container--zone mt6">
    <div class="region region--full">
      <div class="component component--module page-header">
        <div class="column column--full">
          <header class="header header--page">
            <h1 class="title">
              <span class="label">{{ title }}</span>
            </h1>
          </header>
        </div>
      </div>
      <div class="component component--module text__block">
        <div class="column column--primary">
          <div class="element element--textblock">
            <p>
              Sinopoly Watch Picks highlights items we think you'll find useful;
              the Sinopoly Watch News staff is not involved in creating this
              content. We might earn a commission from links in this content.
              <a>Learn more</a>
            </p>
          </div>
        </div>
      </div>
      <div class="component component--layout layout--C2">
        <div class="region region--full">
          <imgTextMd v-if="ismoney" :lastRightData="moneyWatchData"></imgTextMd>
        </div>
        <mastPopular></mastPopular>
      </div>
      <newsViewer v-if="isRegion" :newsData="fetuData" :newstitle="newstitle"></newsViewer>
    </div>
  </div>
</template>
<script setup>
import imgTextMd from "@/views/marketPickets/imgTextMd/imgTextMd";
import mastPopular from "@/views/home/mastPopular/mastPopular.vue"; //最受欢迎模块
import newsViewer from "@/views/latestNews/hotheHeadlines/newsViewer/newsViewer";
import homeRequest from "@/api/home.js";
const moneyData = ref([])
const moneyWatchData = ref([])
const ismoney = ref(false)
// 新闻列表 头部左边大图stcoks关键字部分
const getNewList = (typeKey) => {
  let data = {
    current: 1,
    size: 50,
    isImg: 1,
    key: typeKey
  }
  homeRequest.newsData(data)
    .then((res) => {
      console.log(res)
      if (res.code == "0") {
        moneyData.value = res.data.records
        if (moneyData.value.length >= 10) {
          moneyWatchData.value = moneyData.value.slice(0, 8)
        }
        ismoney.value = true

      }
    })
    .catch((e) => {
    });
}
const FrontData = ref([])
const fetuData = ref([])
const isRegion = ref(false)

let newstitle = ref({
  title: "",
  content: "MORE FROM BARBARA KOLLMEYER",
});
function frontData() {
  //新闻列表
  let data = {
    key: "s",
  };
  homeRequest
    .getgroupData(data)
    .then((res) => {
      if (res.code == "0") {
        FrontData.value = res.data;
        if (FrontData.value.auto !== null) {
          fetuData.value = FrontData.value.auto.news
        }
        isRegion.value = true;
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
const typeKey = ref('money')
onMounted(() => {
  getNewList(typeKey)
  frontData(typeKey)
});
import { useRouter } from "vue-router";
const router = useRouter();
const title = ref("");
watch(
  () => router.currentRoute.value,
  (newValue) => {
    console.log(router.currentRoute.value, "router.currentRoute.value");
    console.log(newValue);
    moneyData.value = []
    if (newValue.params.nation === "money") {
      title.value = "Money";
      typeKey.value = "money";
      getNewList(typeKey.value)
      console.log(typeKey)
    } else if (newValue.params.nation === "estate") {
      title.value = "Real Estate";
      typeKey.value = "estate";
      getNewList(typeKey.value)
      console.log("22222")
    } else if (newValue.params.nation === "retirement") {
      title.value = "Retirement";
      typeKey.value = "retirement";
      getNewList(typeKey.value)
      console.log("33333")
    } else if (newValue.params.nation === "banking") {
      title.value = "Banking";
      typeKey.value = "banking";
      getNewList(typeKey.value)
      console.log("44444")
    } else if (newValue.params.nation === "lifestyle") {
      title.value = "Lifestyle";
      typeKey.value = "lifestyle";
      getNewList(typeKey.value)
      console.log("55555")
    } else if (newValue.params.nation === "marketPickets") {
      title.value = "LATEST";
      typeKey.value = "marketPickets";
      getNewList(typeKey.value)
      console.log("66666")
    }
  },
  { immediate: true }
);

</script>
<style scoped lang="scss">
.element--textblock {
  p {
    font-size: 13px;
  }
}

.cover {
  width: auto;
  margin-top: 10px;
}
</style>
